<template>
  <div>
    <el-button size="mini" @click="addStu()">添加学生</el-button>
    <el-table :data="dataList" stripe height="400" highlight-current-row border>
      <el-table-column prop="name" label="学生姓名"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)"
          >删除</el-button
        >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="itemsPerPage"
      :page-sizes="[5, 10, 20]"
      :current-page="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <!-- 添加学生 -->
    <el-dialog :visible.sync="dialogVisibleAdd" title="添加学生">
      <el-form
        :model="addForm"
        :inline="false"
        ref="addForm"
        class="demo-addForm"
      >
        <el-form-item label="学生姓名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="用户名:" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="密码:" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-button @click="submit()">保存</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import adminApi from "@/api/admin";

export default {
  data() {
    return {
      total: 0,
      itemsPerPage: 20,
      page: 1,
      dataList: [],
      dialogVisibleAdd: false,
      addForm: {
        name: "",
        username:"",
        password:""
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    //查询
    fetchData() {
      adminApi.searchStu(this.page, this.itemsPerPage).then((response) => {
        const resp = response.data;
        if (resp.code == 200) {
          this.total = resp.total;
          this.dataList = resp.data;
          this.$message({
            message: resp.data,
            type: "success",
          });
        } else {
          this.$message({
            message: resp.msg,
            type: "warning",
          });
        }
      });
    },
    handleSizeChange(val) {
      //切换当前页
      this.itemsPerPage = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      //切换每页显示条数
      this.page = val;
      this.fetchData();
    },
    handleDelete(id) {
      adminApi.deleteStu(id).then((response) => {
        const resp = response.data;
        if (resp.code == 200) {
          this.$message({
            message: resp.data,
            type: "success",
          });
          this.fetchData();
        } else {
          this.$message({
            message: resp.data,
            type: "warning",
          });
        }
      });
    },
    addStu() {
      this.dialogVisibleAdd = true;
    },
    submit() {
      adminApi.addStu(this.addForm).then((response) => {
        const resp = response.data;
        if (resp.code == 200) {
          this.$message({
            message: resp.data,
            type: "success",
          });
          this.dialogVisibleAdd = false
          this.addForm.name = ""
          this.addForm.username = ""
          this.addForm.password = ""
          this.fetchData()
        } else {
          this.$message({
            message: resp.data,
            type: "warning",
          });
        }
      });
    },
  },
};
</script>

<style>
</style>